<template>
   <div class="report-template">
    <div class="report-cont" :style="{height: viewHeight + 'px'}">
      <div class="report-header">
        <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAddTemplate">新增</el-button>
      </div>
      <div class="report-table">
        <el-table
        border
        size="small"
        :data="tableData"
        :style="{height: tableHeight + 'px','overflow': 'auto'}">
        <el-table-column
          label="#"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="caseReportName"
          label="报告单">
        </el-table-column>
        <el-table-column
          prop="isPictureAlgorithm"
          label="是否配置算法">
          <template slot-scope="scope">
             <span v-if="scope.row.isPictureAlgorithm">是</span>
             <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="caseReportName"
          label="图片算法">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间">
          <template slot-scope="scope">
             <span>
             {{ timeFormat(scope.row.createTime) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          width="220"
          label="操作">
          <template slot-scope="scope">
            <span @click="handleView(scope.row)" class="oper">
              <i class="el-icon-view"></i>
              <span class="oper-label">查看</span>
            </span>
            <span @click="handleEdit(scope.row)" class="oper">
              <i class="el-icon-edit"></i>
              <span class="oper-label">编辑</span>
            </span>
            <span @click="handleDelete(scope.row)" class="oper">
              <i class="el-icon-delete"></i>
              <span class="oper-label">删除</span>
            </span>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <div class="report-bottom">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 新增/编辑-->
    <add-template ref="addTemplate" :title="title" :currentId="currentId" @getReportTemplateList="getReportTemplateList"></add-template>
    <!-- 查看-->
    <view-template ref="viewTemplate"  :currentId="currentId"></view-template>
   </div>
</template>
<script>
import { getList, remove } from "@/api/featureManager/reportCard";
// import { mapGetters } from "vuex"
import addTemplate  from './featureComponents/addTemplate.vue'
import viewTemplate from './featureComponents/viewTemplate.vue'
export default {
  data() {
    return {
      viewHeight: document.body.clientHeight - 125,
      tableHeight: document.body.clientHeight - 250,
      tableData: [],
      currentPage: 1,
      total: 0,
      pageSize: 10,
      title: '',
      currentId: ''

    }
  },
  components: {addTemplate, viewTemplate},
  created() {
    this.getReportTemplateList()
  },
  mounted() {
      window.onresize = () => {
        this.viewHeight = document.body.clientHeight - 125
        this.tableHeight = document.body.clientHeight - 250
      }
  },
  methods: {
    // 格式化时间
    timeFormat (val) {
      if (val) {
        return this.$moment(val).format("YYYY-MM-DD hh:mm:ss")
      } else {
        return ''
      }
    },
    // 分页
    handleSizeChange (val) {
      this.pageSize = val
      this.page = 1
      this.getReportTemplateList()
    },
    // 当前页
    handleCurrentChange (val) {
      this.currentPage = val
      this.getReportTemplateList()
    },
    // 获取列表数据
    getReportTemplateList () {
      getList(this.currentPage, this.pageSize)
      .then(res => {
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
    },
    // 新建
    handleAddTemplate () {
      this.title = '新增报告单'
      this.currentId = ''
      this.$refs.addTemplate.dialogFormVisible = true
    },
    // 编辑
    handleEdit (row) {
      debugger
      this.title = '编辑报告单'
      this.currentId = row.id
      this.$refs.addTemplate.dialogFormVisible = true
    },
    // 删除
    handleDelete (row) {
      this.$confirm('确定将选择数据删除??', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            id: row.id
          }
          remove(params)
            .then(() => {
              this.$message.success('删除成功')
              this.currentPage = 1
              this.getReportTemplateList()
            })
        })
    },
    // 查看
    handleView (row) {
      this.currentId = row.id
      this.$refs.viewTemplate.dialogFormVisible = true
    }
  }
};
</script>
  
<style scoped>
.report-template {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.report-cont {
  padding: 20px;
  background: #ffffff;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
.report-table {
  margin-top: 12px;
}
.report-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: right;
  padding-right: 16px;
}
.oper {
  display: inline-block;
  width: 50px;
  height: 20px;
  color: #409EFF;
  margin-right: 10px;
  cursor: pointer;
}
.oper-label {
  display: inline-block;
  padding-left: 5px;
}
</style>
  